﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dribble Ball</title>
    <link rel="stylesheet" href="../css/db.css" />
    <link rel="stylesheet" href="../css/colorbox.css" />
     <script type="text/javascript" src="../js/track.js"/>
</head>
<body>
    <div id="status">
        <div id="counter">
        </div>
    </div>
    <div id="win">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            width="4500" height="1400" version="1.1">
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color: #FFE570; stop-opacity: 0.4" />
                <stop offset="100%" style="stop-color: #646464; stop-opacity: 0.4" />
            </linearGradient>
            <defs>
                <path id="direction" stroke="#000000" d="m-10.60661,28.19893c-2.57361,-1.51245 -2.23609,-2.42815 4.02107,-10.90557c3.15933,-4.28057 5.74433,-7.90729 5.74433,-8.05942c0,-0.15191 -8.72451,-0.27635 -19.38756,-0.27635l-19.38774,0l0,-8.01723l0,-8.01712l19.5413,0c15.06768,0 19.37321,-0.24151 18.80682,-1.05485c-0.40398,-0.5803 -3.16043,-4.43034 -6.12494,-8.55574c-5.58802,-7.7766 -5.58636,-9.86195 0.00884,-10.50849c2.78446,-0.32158 46.13598,24.39523 47.62597,27.15416c-14.43994,9.8506 -31.70061,20.16171 -47.60056,29.25328c-0.83834,0 -2.29997,-0.45575 -3.24752,-1.01267l-0.00001,0.00001z"
                    stroke-width="5" fill="#ff0000">
                    <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1;1.1;1"
                        dur="1s" fill="freeze" repeatCount="indefinite" />
                    <animate attributeType="css" attributeName="opacity" values="0.9;1;0.9" dur="1s"
                        fill="freeze" repeatCount="indefinite" />
                </path>
            </defs>
            <g id="back">
                <rect width="100%" height="100%" fill="url(#grad1)">
                </rect>
            </g>
            <g id="main">
                <!--top border -->
                <line x2="0" y2="5" x1="4500" y1="5" db-pad="border" />
                <use xlink:href="#direction" transform="translate(268, 200)" />
                <!--line 1-->
                <line x1="0" y1="500" x2="500" y2="500" db-pad="ice" />
                <g db-cat="reward" transform="translate(400 400)" />
                <!--floating-->
                <line x1="600" y1="400" x2="900" y2="400" db-pad="ground" />
                <line x2="600" y2="400" x1="750" y1="550" db-pad="ground" />
                <line x1="900" y1="400" x2="750" y2="550" db-pad="ground" />
                <line x1="400" y1="600" x2="1100" y2="600" db-pad="bad" />
                <!--turn down-->
                <use xlink:href="#direction" transform="translate(1320, 200) rotate(90)" />
                <line x1="1000" y1="500" x2="1200" y2="500" db-pad="ground" />
                <line x1="1200" y1="500" x2="1200" y2="1400" db-pad="ground" />
                <!--the line on left-->
                <line x1="1500" y1="1050" x2="1500" y2="0" db-pad="ground" />
                <!--turn left-->
                <use xlink:href="#direction" transform="translate(1490, 1200)" />
                <!--celling-->
                <line x2="1500" y2="1050" x1="1900" y1="1050" db-pad="wood" />
                <line x2="1900" y2="1050" x1="1900" y1="900" db-pad="wood" />
                <line x2="2050" y2="1050" x1="2300" y1="1050" db-pad="wood" />
                <line x1="2050" y1="1050" x2="2050" y2="900" db-pad="wood" />
                <line x2="1900" y2="900" x1="2050" y1="900" db-pad="bad" />
                <line x2="1900" y2="1050" x1="2050" y1="1050" db-pad="glass" />
                <g db-cat="reward" transform="translate(1980 1000)" />
                <line x2="2300" y2="1050" x1="2300" y1="0" db-pad="wood" />
                <!--border-->
                <line x2="2500" y2="820" x1="3800" y1="820" db-pad="bad" />
                <!--floor-->
                <use xlink:href="#direction" transform="translate(2600, 1000)" />
                <line x1="1200" y1="1400" x2="2500" y2="1400" db-pad="ground" />
                <!--up-->
                <line x1="2500" y1="1400" x2="2500" y2="1200" db-pad="ground" />
                <!--left-->
                <g db-cat="reward" transform="translate(3000 930)" />
                <line x1="2500" y1="1200" x2="3500" y2="1200" db-pad="ground" />
                <!--down-->
                <line x2="3500" y2="1400" x1="3500" y1="1200" db-pad="ground" />
                <!--left-->
                <line x1="3500" y1="1400" x2="4500" y2="1400" db-pad="ground" />
                <!--target-->
                <line x1="4240" y1="1000" x2="4400" y2="1000" db-cat="target" />
                <line x2="4240" y2="1010" x1="4400" y1="1010" db-pad="wood" />
                <circle cx="4240" cy="1000" r="5" db-pad="wood" />
                <circle cx="4400" cy="1000" r="5" db-pad="wood" />
                <line x1="4440" y1="1100" x2="4440" y2="820" db-pad="wood" />
                <!--right border-->
                <line x2="4490" y2="1400" x1="4490" y1="0" db-pad="bad" />
            </g>
         <rect id="dummy" width="100%" height="100%" fill-opacity="0">
            </rect>
            <g id="front">
                <defs>
                    <marker id="mTriangle" markerWidth="50" markerHeight="100" refX="50" refY="50" orient="auto">
                        <path d="M 0 0 50 50 0 100 Z" style="fill: black;" />
                    </marker>
                </defs>
                <rect x="2500" y="200" width="1000" height="1000" class="grill">
                </rect>
            </g>
        </svg>
    </div>
    <div id="skip">
        &lt;&lt; Skip Preview
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.countdown.js"></script>
    <script type="text/javascript" src="../js/jquery.colorbox.js"></script>
    <script type="text/javascript" src="../js/svg.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        db.path = [{ x: 0, y: 300 }, { x: 1200, y: 300 }, { x: 1200, y: 1100 }, { x: 4500, y: 1100}];

        db.isInBoundary = function (x, y) {
            return y < 1400;
        }
        //highlightDesign();
        startGame({ time: 30 });
    //]]>
    </script>
</body>
</html>
